<!DOCTYPE html>
<html lang="en" ng-app="myApp" ng-controller="controllerl">
<head>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no, email=no">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="HandheldFriendly" content="true">
<meta name="MobileOptimized" content="640">
<meta name="screen-orientation" content="portrait">
<meta name="x5-orientation" content="portrait">
<meta name="full-screen" content="yes">
<meta name="x5-fullscreen" content="true">
<meta name="browsermode" content="application">
<meta name="x5-page-mode" content="app">
<meta name="msapplication-tap-highlight" content="no">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">
<meta charset="utf-8">
<title class="ng-binding">{$video.title} - 66Play</title>
<link href="__ASSETS__/mobile/share/css/common.css" style="text/css" rel="stylesheet">
<link href="__ASSETS__/mobile/share/css/style.css" style="text/css" rel="stylesheet">
<script src="//hm.baidu.com/hm.js?a6aca44fb0766ba8175dcfde664acdf4"></script><script type="text/javascript" src="http://static.ilongyuan.cn/cdn/script/jquery-1.8.3.min.js"></script>
<script>
    var login = {$Think.const.UID > 0 ? 1 : 0};
    var videoId = '{$video.id|default=0}';
    var login_url = "{$login_url}";
</script>
<script type="text/javascript" src="__ASSETS__/mobile/share/js/jquery_public.js"></script>
<script type="text/javascript">
{:C('GLOBAL_BDHM')}
</script>
</head>
<body style="font-size: 7.2px;">
<div class="header">
    <div class="poster">
        <img class="poster_img" src="{$video.thumb}" alt="封面"/>
        <img class="poster_play" style="width: 85px;height: 85px;" src="__ASSETS__/mobile/share/images/play.png" alt="播放"/>
        <img class="poster_load" style="width: 85px;height: 85px;" src="__ASSETS__/mobile/share/images/load.png" alt="播放"/>
    </div>
    <div class="poster1">
        <img class="poster_play" style="width: 85px;height: 85px;" src="__ASSETS__/mobile/share/images/play.png" alt="播放"/>
        <img class="poster_load1" style="width: 85px;height: 85px;" src="__ASSETS__/mobile/share/images/load.png" alt="播放"/>
    </div>
    <div class="poster2">
        <img class="poster_play" style="width: 85px;height: 85px;" src="__ASSETS__/mobile/share/images/play.png" alt="播放"/>
        <img class="poster_load animation" style="width: 85px;height: 85px;" src="__ASSETS__/mobile/share/images/load.png" alt="播放"/>
    </div>
    <div class="btn">重新播放</div>
</div>
<div class="content">
    <div class="content_header ng-binding">{$video.title}</div>
    <div class="content_text ng-binding">{$video.detail}</div>
    <div class="content_author">
        <div class="author_pic" style="height: 45px;"><img src="{$video.user.avatar|default="__PUBLIC__/Home/static/images/avatar-mr.png"}"></div>
        <div class="author_info">
            <div class="author_name"><a href="#" class="ng-binding">{$video.user.nickname}</a></div>
            <div class="author_game">
            <p>所属游戏&nbsp;:&nbsp;</p><p class="ng-binding">{$video.game.name}</p>
            <span class="ui-block-b JS-like">
                <em class="JS-likecount">{$video.statis.zan}</em>
                <if condition="$video.action.iz_zan eq 0">
                    <b class="share-prise"></b>
                <else />
                    <b class="share-prise share-prise-active"></b>
                </if>
            </span>
            </div>
        </div>
    </div>
</div>
<div class="recommendation"><p>相关推荐</p></div>
<ul class="recommendation_container">
    <!-- ngRepeat: x in recommend -->
    <volist name="about_videos" id="v">
    <li class="" in="">
        <!-- <a href="javascript:" ng-click="uri_id(x.id)"><img src="{{x.thumb}}"></a> -->
        <a href="{:U('share/video', ['id' => $v['id']])}"><img src="{$v.thumb}"></a>
        <span class="ng-binding">{$v.title}</span>
    </li>
</volist>
   <!-- end ngRepeat: x in recommend -->
</ul>
<div class="download">
    <div class="bg"></div>
    <div class="current">
        <div class="logo">
            <div class="logo_pic">
                <img style="width:auto;" src="__ASSETS__/mobile/share/images/logo.png">
            </div>
            <div class="tvInfo">
                <p class="tvName">66Play</p>
                <p class="tvVersion ng-binding">v {$appRes.outer_version}</p>
            </div>
        </div>
        <a href="{:U('Download/index')}" class="download_button">下载</a>
    </div>
</div>
<script type="text/javascript">
var url="{$video.uri}";
window.onload=function(){
    var height=$(".header").height();
    $(".header").css({"line-height":height+"px"});
    $(".poster").click(function(){
        $(".poster .poster_load").toggleClass("animation");
        var video='<video  id="myVideo" src="'+url+'" controls="controls"></video>';
        $("video").remove();
        $(".header").append(video);
        Media = document.getElementById("myVideo");
        Media.play();
        if(Media.paused){
            Media.play();
        }
        Media.onended = function() {
            end=1;
            $(".poster1").hide();
            $(".btn").show().click(function(){
                Media.load();
                Media.play();
                $(".btn").hide();
                end=0;
            });
        };
        var n=0;
        var end=0;
        var t=setInterval(function(){
            if(Media.paused&&end==0){
                $(".poster1").show().click(function(){
                    Media.play();
                });
            }
            if(Media.networkState==1){
                $(".poster").hide();
                $(".poster1").hide();
                $(".poster2").hide();
            }
            if(Media.error !=null ){
                if(Media.error.code==4||Media.error.code==2){
                    $(".poster").hide();
                    $(".poster1").hide();
                    var t1=setTimeout(function(){
                        Media.load();
                        n=n+1;
                        $(".poster2").show();
                        $(".poster1").hide();
                    },10);
                    if(n>10){
                        $(".poster2").hide();
                        $("video").remove();
                        $(".header").text("很抱歉,网络可能存在问题,请刷新!").click(function(){
                            location.reload();
                        });
                        clearInterval(t);
                        clearInterval(t1);
                    }

                }
            }

        },2000);
    });
};
var pending = false;
$(function(){
    $('.JS-like').click(function(){
        if (pending) {
            return;
        }
        var obj = this;
        var is_zan = $(obj).find('.share-prise').hasClass('share-prise-active');
        var url = is_zan ? "{:U('like/unlike')}" : "{:U('like/dolike')}";
        var param = {
            type : 1,
            id : {$video.id},
        };
        pending = true;
        $.post(url, param, function(data, textStatus, xhr) {
            if (data.status == 0) {
                location.href = "{:U('User/login')}";
                return;
            }
            if (data.state == 0) {
                var count = parseInt($('.JS-likecount').html());
                if (is_zan) {
                    count -= 1;
                    $(obj).find('.share-prise').removeClass('share-prise-active');
                } else {
                    count += 1;
                    $(obj).find('.share-prise').addClass('share-prise-active');
                }
                $('.JS-likecount').html(count);
            }
            pending = false;
        });
    });
});
</script>
</body>
</html>